<template>
  <body>
  <div>
    <img src="../assets/img-login.jpg" class="pic">
    <h1 class="titl21">欢迎加入智慧家园</h1>
    <div class="bian2">
      <form>
        <div class="clas21">姓&nbsp; &nbsp;名&nbsp; : &nbsp;<input @blur="checkName()" id=name  type="text" class="text1" v-model="name">
          <span id="s_user" class="error"></span>
          <div class="tishi">3-20位,无特殊字符,必须有字母</div>
        </div>
        <div class="clas22">账&nbsp; &nbsp;号&nbsp; : &nbsp;<input   @blur="checkAccount" id=id type="text"  class="text1" v-model="account">
          <span id="i_user" class="error"></span>
        </div>
        <div class="clas23">电&nbsp; &nbsp;话&nbsp; : &nbsp;<input @blur="checkTele" id=id type="text"  class="text1" v-model="telephone">
          <span id="i_tele" class="error"></span>
        </div>
<!--        <div class="class24">默认地址&nbsp; : &nbsp;-->

<!--          <div class="tishi">密码不少于六位，含数字字母</div>-->
<!--        </div>-->
        <p class="clas24">默认地址 &nbsp;: &nbsp; {{this.$route.query.place}}</p>
        <div class="clas25">密&nbsp; &nbsp;码 &nbsp;: &nbsp;<input @blur="checkpwd" id=pwd type="password"  class="text1" v-model="password">
          <span id="p_user" class="error"></span>
        </div>
        <div class="clas26">确认密码 : <input @blur="confirmpwd" id=repwd type="password" class="text21">
          <span id="r_user" class="error"></span>
        </div>
      </form>
      <div>
        <button type="button" class="clas27" @click="registered">确认</button>
      </div>
    </div>
    <div class="con3">
      <tr>请上传身份证正面进行安全验证</tr>
    <input
        type="file"
        id="idd"
        name="image"
        class="getImgUrl_file"
        @change="shangc($event)"
        accept="image/jpg, image/jpeg, image/png"
    />
    <!--        <br/>-->
    <!--        <img :src="picPath" alt="">-->

    <tr  v-if="Data" v-for="item in Data"  >
      <td>身份证号码:{{item.公民身份号码.words}}</td>
    </tr>
    </div>
  </div>
  </body>
</template>


<script>
import request from "@/utils/request";
import router from "@/router";
export default {
  name: "UserRent",
data() {
  return {
    picPath:'',
    Data: [],
    data:[],
    name: '',
    account: '',
    password:'',
    telephone: '',
    place: '',
    imf: {
      status:'2'
    },
  }
},
methods: {
  registered() {
    request.post("http://localhost:8082/user/rentuser?name="+this.name+"&account="+this.account+"&telephone="+this.telephone+"&password="+this.password+"&place="
        +this.$route.query.place).then(res =>{
      if(res.flag){
        // localStorage.setItem("userToken",res.data)
        this.tabledata=res.data
        console.log('test',this.tabledata)
        router.push({path: '/userConfirm',query: { status: this.imf.status }});
        this.$message({
          type: 'success',
          message: res.msg
        })
      }else {
        this.$message.error(res.msg)
        this.account = ''
        this.password = ''
      }
    })
          // router.push({path: '/userConfirm'});
  },
  checkName() {
    let name = this.name
    let s_user = document.getElementById("s_user")
    let reg_name = /[\u4E00-\u9FA5]{2,5}$/;
    let flag = reg_name.test(name);
    if (flag) {
      s_user.innerHTML = "格式正确";
      this.flag1 = true;
    } else {
      s_user.innerHTML = "用户名格式有误！";
      this.flag1 = false;
    }
    return flag;
  },
  checkAccount() {
    let id = this.account
    let i_user = document.getElementById("i_user");
    if ((id.length <= 20 && id.length >= 3) && id.match(/[a-zA-Z]/) && !id.match(/[^a-zA-Z0-9]/)) {
      i_user.innerHTML = "格式正确";
      this.flag2 = true;
      return true;
    } else {
      i_user.innerHTML = "账号格式有误！";
      this.flag2 = false;
      return false;
    }
  },
  checkTele() {
    let tele = this.telephone
    let i_tele = document.getElementById("i_tele");
    if (tele.match(/^1[3-9]\d{9}$/)) {
      i_tele.innerHTML = "格式正确";
      this.flag3 = true;
      return true;
    } else {
      i_tele.innerHTML = "电话号码有误!";
      this.flag3 = false;
      return false;
    }
  },
  checkpwd() {
    let pwd = this.password
    let p_user = document.getElementById("p_user");
    let reg_pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
    let flag = reg_pwd.test(pwd);
    if (flag) {
      p_user.innerHTML = "格式正确";
      this.flag4 = true;
    } else {
      p_user.innerHTML = "密码格式有误！";
      this.flag4 = false;
    }
    return flag;
  },
  confirmpwd() {
    let pwd = this.password
    let repwd = document.getElementById("repwd").value;
    let r_user = document.getElementById("r_user");
    if (pwd != repwd) {
      r_user.innerHTML = "两次密码不一致";
      this.flag5 = false;
    } else {
      r_user.innerHTML = "";
      this.flag5 = true;
    }
  },
  // checkName() {
  //   let name = this.registeredForm.name
  //   let s_user = document.getElementById("s_user")
  //   let reg_name = /[\u4E00-\u9FA5]{2,5}$/;
  //   let flag = reg_name.test(name);
  //   if (flag) {
  //     s_user.innerHTML = "格式正确";
  //     this.flag1 = true;
  //   } else {
  //     s_user.innerHTML = "用户名格式有误！";
  //     this.flag1 = false;
  //   }
  //   return flag;
  // },
  getplace(){
    const data=this.$route.query.place
    console.log('test',data)
},
  // checkAccount() {
  //   let id = this.registeredForm.account
  //   let i_user = document.getElementById("i_user");
  //   if ((id.length <= 20 && id.length >= 3) && id.match(/[a-zA-Z]/) && !id.match(/[^a-zA-Z0-9]/)) {
  //     i_user.innerHTML = "格式正确";
  //     this.flag2 = true;
  //     return true;
  //   } else {
  //     i_user.innerHTML = "账号格式有误！";
  //     this.flag2 = false;
  //     return false;
  //   }
  // },
  // checkTele() {
  //   let tele = this.registeredForm.tele
  //   let i_tele = document.getElementById("i_tele");
  //   if (tele.match(/^1[3-9]\d{9}$/)) {
  //     i_tele.innerHTML = "格式正确";
  //     this.flag3 = true;
  //     return true;
  //   } else {
  //     i_tele.innerHTML = "电话号码有误，请重新填写！";
  //     this.flag3 = false;
  //     return false;
  //   }
  // },
//   checkpwd() {
//     let pwd = this.registeredForm.password
//     let p_user = document.getElementById("p_user");
//     let reg_pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
//     let flag = reg_pwd.test(pwd);
//     if (flag) {
//       p_user.innerHTML = "格式正确";
//       this.flag4 = true;
//     } else {
//       p_user.innerHTML = "密码格式有误！";
//       this.flag4 = false;
//     }
//     return flag;
//   },
//   confirmpwd() {
//     let pwd = this.registeredForm.password
//     let repwd = document.getElementById("repwd").value;
//     let r_user = document.getElementById("r_user");
//     if (pwd != repwd) {
//       r_user.innerHTML = "两次密码不一致";
//       this.flag5 = false;
//     } else {
//       r_user.innerHTML = "";
//       this.flag5 = true;
//     }
// }
  shangc(e) {
    let files = document.getElementById("idd").files[0];
    let name = document.getElementById("idd").files[0].name;
    // this.picPath=document.getElementById("idd").value

    let arr = name.split(".");
    let fileSize = 0;
    let fileMaxSize = 10240; //1M
    if (files) {
      fileSize = files.size;
      if (fileSize > 10 * 1024 * 1024) {
        alert("文件大小不能大于10M！");
        file.value = "";
        return false;
      } else if (fileSize <= 0) {
        alert("文件大小不能为0M！");
        file.value = "";
        return false;
      }
    } else {
      return false;
    }
    //转码base64
    let reader = new FileReader();
    let imgFile;
    // let that = this
    reader.readAsDataURL(files);
    reader.onload = async e => {
      imgFile = e.target.result;
      let arr = imgFile.split(",");
      this.faceBase64 = arr[1];
      this.picPath='data:image/jpg;base64,'+arr[1]
      console.log(imgFile)
      const params = new FormData(); // 声明formData数据类型
      params.append("image", imgFile); //图片base64
      params.append("access_token", '24.e517edb5976943a9240f76080b4e7c2f.2592000.1714650122.282335-59429161'); //access_token
      params.append("id_card_side",'front')
      request.post("/baiduApi/rest/2.0/ocr/v1/idcard", params, {
        headers: {
          "Content-Type": "application/x-www-form-undefined",
        },
      })
          .then((res) => {
            this.Data.push(res.words_result);
          });
      console.log('111',this.Data);
    };
  },
},
  created() {
    this.getplace();
  },
}
</script>

<style>
.titl21 {
  position: absolute;
  margin-left: 40%;
  top: 80px;
}

.clas21 {
  /* display: inline-flex; */
  position: absolute;
  top: 50px;
  margin-left: 5%;
  text-align: center;
  font-family: fantasy;
}

.clas22 {
  /* display: inline-flex; */
  position: absolute;
  top: 95px;
  margin-left: 5%;
  text-align: center;
  font-family: fantasy;
}

.clas23 {
  /* display: inline-flex; */
  position: absolute;
  top: 140px;
  margin-left: 5%;
  text-align: center;
  font-family: fantasy;
}

.clas24 {
  /* display: inline-flex; */
  position: absolute;
  top: 185px;
  margin-left: 3%;
  text-align: center;
  font-family: fantasy;
}

.clas25 {
  /* display: inline-flex; */
  position: absolute;
  top: 230px;
  margin-left: 5%;
  text-align: center;
  font-family: fantasy;
}

.clas26 {
  /* display: inline-flex; */
  position: absolute;
  top: 275px;
  margin-left: 3%;
  text-align: center;
  font-family: fantasy;
}

.clas27 {
  position: absolute;
  margin-left: 39%;
  top: 380px;
  width: 260px;
  height: 35px;
  background-image: url(../assets/button-bg.jpg);
  border-radius: 5px;
  font-size: 20px;
}

.text21 {
  height: 25px;
  width: 300px;
}

.tishi {
  float: bottom;
  color: rgb(163, 156, 146);
  font-size: 12px;
  align-self: center;
}
.bg{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
}
.bian2{
  position: absolute;
  margin-top: 10%;
  margin-left: 20%;
  width:  800px;
  height:500px;
  z-index: -1;
  box-shadow: 12px 12px 12px rgba(1,1,1,4);
  background-color: #cedaec;
  border-radius: 20px;
}
.con3{
  position: absolute;
  top:200px;
  margin-left: 56%;
}
</style>